<style scoped>

.newdoclist {
  
  
}

.search {
  padding-bottom: 20px;
}

.search span {
  color: #68777c;
  font-weight: bold;
  padding-right: 18px;
}

.search button {
  background-color: #00a8f7;
  color: #fff;
  margin-left: 8px;
}

.top {
  margin-bottom: 20px;
  border-top: 1px dashed #cccccc;
}
.wraper .headline {
  position: relative;
  font-size: 12px;
  color: #303134;
  font-weight: bold;
  margin: 10px 0;
  line-height: 32px;
}

.wraper .add-agent {
  position: absolute;
  top: 0px;
  right: 30px;
  background-color: #348bf2;
  color: #fff;
}

.iconfont {
  font-size: 14px;
}

.red-font {
  color: #ff1f1f;
}

.fixed-bottom {
  padding-left: 20px;
  padding-right: 20px;
  height: 80px;
  line-height: normal !important;
  position: fixed;
  left: 210px;
  right: 0;
  bottom: 0;
  z-index: 999;
  text-align: center;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.28);
}
.sidehide {
  left: 75px;
}
.pro {
  margin-bottom: 10px;
}

/* 表格样式 start*/

.pro-card {
  margin-bottom: 10px;
}

.pro-card-head {
  background-color: #e6e7eb;
  line-height: 38px;
  border: 1px solid #ddd;
}

.pro-card-title {
  font-size: 14px;
  color: #333;
  font-weight: bold;
  padding-left: 20px;
}

.pro-card-headr {
  padding-right: 10px;
  text-align: right;
}

.pro-card-content {
  clear: both;
}

.pro-paramname {
  text-align: center;
  background-color: #e6e7eb;
  font-size: 14px;
  color: #333;
  border-right: 1px solid #ddd;
}

.pro-paramvalue {
  padding-left: 10px;
  border-right: 1px solid #ddd;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pro-card-contentrow {
  line-height: 40px;
  border-left: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

/* 表格样式  end */

/* 分页 start */

.page {
  margin: 0;
}

.ivu-page {
  padding-bottom: 150px;
}

/* 分页 end */
</style>
<style>
/* 地图的区域  .amap-demo */
.amap-demo {
    height: 300px !important;
    margin-bottom:15px;
}
.newdoclist .ivu-input-type textarea {
    resize: none;
    height: 36px !important;
}
.a-link {
  color: #4074e1;
  text-decoration: underline;
  cursor: pointer;
}
.newdoclist .ivu-input-group .ivu-input {
  margin-top: -1px;
}
.newdoclist #footer{
        height: 80px;
        line-height: 80px;
        position: fixed;
        bottom: 0;
        z-index:1000;
        text-align: center;
        background-color: #FFF;
        box-shadow: -1px -3px 2px #E3E3E3;
    }
    /* .newdoclist .address .ivu-input-group-append{
        vertical-align: middle;
        border:none !important;
    }
    .newdoclist .address .ivu-input-group-append button{
        background-color: #fafafa;
        border-right:1px solid #bebebe;
        border-top:1px solid #bebebe;
        border-bottom:1px solid #bebebe;
       border-left:none;
       border-top-right-radius:2px;
       border-bottom-right-radius:2px;
       height: 36px !important;
       
    }
    .newdoclist .address input.ivu-input{
        height: 35px !important;
    }
    .newdoclist .add1 input.ivu-input{
        height: 35px !important;
    }
    .newdoclist .same .ivu-form-item{
        padding-right:0px;
    }
     */
     .newdoclist  .shen label.ivu-form-item-label{
        height: 36px !important;
    }
    .newdoclist .address .ivu-input-group-append{
        background-color: #fafafa;
        border-right:1px solid #bebebe;
        border-top:1px solid #bebebe;
        border-bottom:1px solid #bebebe;
       border-left:none;
       border-top-right-radius:2px;
       border-bottom-right-radius:2px;
       height: 36px !important;
        position: relative;
        top: -1px;
    }
</style>



<template>
    <div class="newdoclist">
        <product-title></product-title>
        <div class="wraper" style="padding:0 30px;">        
            <div class="pro common-box-header">
                <Row>
                    <h3 >
                       基本信息
                    </h3>
                </Row>
            </div>
            <div class="common-box-body">
                <Form  :model="formdata" ref="formdata1" :rules="ruleCustom1">
                    <Row>
                        <Col :xs="24" :sm="24" :md="6" :lg="6" class="shen">
                            <FormItem  label="机构代码">
                                <Input type="text" v-model="formdata.agency_code"   placeholder="请输入机构代码"></Input>
                            </FormItem>
                        </Col>
                        <Col :xs="24" :sm="24" :md="6" :lg="6" class="shen" >
                            <FormItem prop="name" label="机构名称">                                
                                <Input type="text"  v-model="formdata.name"  placeholder="请输入机构名称"></Input>                               
                            </FormItem>
                        </Col>
                        <Col :xs="24" :sm="24" :md="6" :lg="6" class="shen">
                            <FormItem  label="机构简称">                                
                                <Input type="text"  v-model="formdata.shortn"  placeholder="请输入机构简称"></Input>                               
                            </FormItem>
                        </Col>
                        <Col :xs="24" :sm="24" :md="6" :lg="6"  class="same shen">
                            <FormItem prop="reg_dateall" label="设立时间">
                                    <DatePicker  type="date"   v-model="formdata.create_timed" @on-change="datachange($event,formdata,'reg_date')"  placeholder="请选择设立时间" :transfer=true placement="bottom"></DatePicker>  
                            </FormItem>
                        </Col> 
                        <Col :xs="24" :sm="24" :md="6" :lg="6">
                            <FormItem  label="联系电话" prop="tel">
                                <Input type="text"  v-model="formdata.tel"   placeholder="请输入联系电话"></Input>
                            </FormItem>
                        </Col>
                        <Col :xs="24" :sm="24" :md="6" :lg="6">
                            <FormItem label="负责人"  >                                
                                <Input type="text"  v-model="formdata.principal" placeholder="请输入负责人"></Input>                               
                            </FormItem>
                        </Col>
                        <Col :xs="24" :sm="24" :md="6" :lg="6" class="same">
                            <Form-item label="角色">
                                <Select v-model="formdata.role_id" :label-in-value="true" @on-change="v=>{ setOption(v,'type')}"  placeholder='请选择角色'>
                                    <Option :value="item.id" v-for="item in roleList" :key="item.id">{{item.name}}</Option>
                                </Select>
                          </Form-item>
                        </Col>
                        <Col :xs="24" :sm="24" :md="6" :lg="6">
                            <FormItem label="机构类型">
                                <Select placeholder="请选择机构类型"  v-model="formdata.cate">  
                                    <Option v-for="item in orgList" :value="item.name" :key="item.name">{{item.name}}</Option>
                                </Select>
                            </FormItem>
                        </Col>
                        <Col :xs="24" :sm="24" :md="12" :lg="12">
                            <FormItem label="所属机构">
                                <Select filterable placeholder="请选择所属机构" v-model="formdata.parent">  
                                    <Option value="0" >公司直辖</Option>
                                    <Option v-for="item in porgList" :value="item._id" :key="item._id">{{item.name}}</Option>
                                </Select>
                            </FormItem>
                        </Col>
                        <Col :xs="24" :sm="24" :md="12" :lg="12">
                            <FormItem label="持证状态">
                                <Select filterable  placeholder="请选择持证状态"  v-model="formdata.holder">  
                                    <Option value="1">有证</Option>
                                    <Option value="2">备案</Option>
                                </Select>
                            </FormItem>
                        </Col>
                    </Row>   
                </Form>
            </div>

            <div class="pro common-box-header">
                <Row>
                    <h3 >
                       其他信息
                    </h3>
                </Row>
            </div>
            <div class="common-box-body">
               <Form > 
                    <Row>
                        <Col :xs="24" :sm="24" :md="6" :lg="6" class="same">
                            <FormItem label="邮政编码">                                
                                <Input type="text"  v-model="formdata.postcode" placeholder="请输入邮政编码"></Input>                               
                            </FormItem>
                        </Col>
                        <Col :xs="24" :sm="24" :md="6" :lg="6">
                            <FormItem  label="注册地">
                                <Input type="text" v-model="formdata.registe_addr" placeholder="请输入注册地"></Input>
                            </FormItem>
                        </Col>
                        <Col :xs="24" :sm="24" :md="6" :lg="6"  class="same">
                            <FormItem label="所属地区">
                               <Cascader :data="area_data" v-model="formdata.area_id" :value="formdata.area_id" trigger="hover" @on-change="areaChange" placeholder="请输入所属地区"></Cascader>
                            </FormItem>
                        </Col>
                        <Col :xs="24" :sm="24" :md="6" :lg="6">
                            <FormItem label="状态" >                                
                                 <Select placeholder="选择状态"  v-model="formdata.status">  
                                    <Option value="营业">营业</Option>
                                    <Option value="停业">停业</Option>
                                    <Option value="吊销">吊销</Option>                      
                                    <Option value="撤销">撤销</Option>
                                    <Option value="改建">改建</Option>                      
                                    <Option value="停业整顿">停业整顿</Option>
                                </Select>                              
                            </FormItem>
                        </Col>
                    </Row>   
                    <Row>
                        <Col :xs="24" :sm="24" :md="12" :lg="12" class="address shen">
                            <FormItem label="地址">                                
                                <Input type="text"  v-model="formdata.address" placeholder="请输入地址"><Button slot="append" icon="ios-search"  @click="addressChange()">在地图中定位</Button></Input>                               
                            </FormItem>
                        </Col>
                        <Col :xs="24" :sm="24" :md="12" :lg="12" class="add1 same shen" >
                            <FormItem label="经纬度">
                               <Input v-model="lat_lng" disabled placeholder="经纬度自动展示"></Input>           
                            </FormItem>
                        </Col>

                        <i-col :xs="24" :lg="16" v-show="mapShow">
                            <Form-item>
                                <el-amap vid="amapDemo" class="amap-demo" :plugin="plugins" :center="mapCenter" style="padding:10px;border: 1px solid #EDEDED">
                                </el-amap>
                            </Form-item>
                        </i-col>
                    </Row>   
                </Form>
            </div>


            
            <div class="common-box-body" style="margin-top:10px;">
                <Form>
                    <Row>
                        <i-col :md="24" :lg="12" class="shen">
                            <FormItem label="备注信息">
                                <Input type="textarea"  v-model="formdata.remark" :autosize="true" placeholder="请填写备注信息"></Input>
                            </FormItem>
                        </i-col>
                        <i-col :md="24" :lg="12" class="shen">
                            <FormItem label="作息时间">
                               <Input type="textarea"  v-model="formdata.schedule" :autosize="true" placeholder="请填写作息时间"></Input>
                            </FormItem>
                        </i-col>
                    </Row>   
                   
                </Form>
            </div>
        </div>
        <div id="footer"  style="padding:0 30px;">
                <Button v-if="$isShow('yun_org/create2')" type="primary" shape="circle" :disabled='tableaction' id="submit" @click="handleSubmit('formdata1')" style="border-radius: 30px !important;margin-top:25px;">
                    <Icon type="checkmark-circled"></Icon>
                    保存 / 提交
                </Button>
                <Button id="back" shape="circle"  style="border-radius: 30px !important;margin-top:25px;" @click="back">返回</Button>
            </div>
    </div>
</template>

<script>
import productTitle from "../../components/productTitle";
import city from '../../asset/js/city';
import { lazyAMapApiLoaderInstance  } from 'vue-amap';
import {create2,getOrgRole} from "../../api/org";
import { getAllCate , getParentCate } from '../../api/yun_org'
export default {
  data() {
      const validateMobile =(rule, value, callback)=>{
                    var re=/(^[0-9]{3,4}\-[0-9]{3,8}$)|(^[0-9]{3,8}$)|(^\([0-9]{3,4}\)[0-9]{3,8}$)|(^0{0,1}13[0-9]{9}$)|(^[0-9]{3,4}\-[0-9]{3,8}\-[0-9]{0,5})|(^1[3|4|5|7|8][0-9]{9}$)/;
                    if(!re.test(value)){
                        callback(new Error('请输入正确电话'));
                    }
                }; 
    return {
        mapShow:false,
        X1:false,
        X2:false,
        plugins: ['Geolocation','PlaceSearch'],
        mapCenter:[113.63305, 34.767174],
        area_data: city,//传入的地区
        tableaction:false,
        roleList:[],
        formdata:{
            holder:'',//持证状态
            create_timed:'',//标准时间
            agency_code:"",//机构代码
            name:'',//机构名称
            shortn:"",//机构简称
            reg_date:"",//设立时间
            tel:'',//联系电话
            principal:'',//负责人
            cate:'',//公司类型
            postcode:'',//邮政编码
            registe_addr:'',//注册地址
            status:'营业',//状态.经营状态
            area_id:[],//省
            area_info:'',//市
            address:'',//地址
            remark:'',//备注信息
            schedule:'',//作息时间
            lat:'',
            lng:'',  
            role_id:'',
            parent:'0'
        },
        orgList:[],
        porgList:[],
        ruleCustom1: {
        name:[{ required: true, message: "该信息不能为空" }],
        tel:[
            {message:'请输入正确电话',trigger: 'blur,change'}

        ]
        // reg_date:[{ required: true, message: "该信息不能为空" }],
        // principal:[{ required: true, message: "该信息不能为空" }],
        // cate:[{ required: true, message: "该信息不能为空" }],
        // address:[{ required: true, message: "该信息不能为空" }],

      },
    //   ruleCustom2: {
    //     status:[{ required: true, message: "该信息不能为空" }],
    //     area_id:[{ required: true, message: "该信息不能为空" }],
    //     address:[{ required: true, message: "该信息不能为空" }],
    //     lat:[{ required: true, message: "该信息不能为空" }],
    //   },
    };
  },
  components: {
    productTitle
  },
  created() {
    this.getRole()  ;
  },
  computed: {
      lat_lng:function(){
            if(!this.formdata.lat||!this.formdata.lng){
                return '';
            }else{
                return this.formdata.lat+','+this.formdata.lng;
            }
        },
        // 找到用户id]
        // getuid(){
        //      return this.$store.state.user.id
        //  } 
  },
   mounted(){
        this.$nextTick(function () {
            document.getElementById('footer').style.width = getComputedStyle(document.getElementsByClassName('newdoclist')[0]).width;

        }),
    // 调用谷歌地图
        lazyAMapApiLoaderInstance.load().then(() => {
            this.map = new AMap.Map('amapDemo', {
                center:this.mapCenter,
                zoom:15
            });
            this._Marker = new AMap.Marker({
                map:null,
            })
            var _self = this
            this.map.on("click",function(event){
                _self.formdata.lng = event.lnglat.lng;
                _self.formdata.lat = event.lnglat.lat;
                setTimeout(()=>{
                    _self.mapShow=true;
                },1000)
            })
            AMap.event.addListener(this._Marker,'dragend',function(){
//                alert(this._Marker.getPosition( ))
//                alert(getPosition( ))
            })
//
        })
        this.getOrgCate()
        this.getPorgCate()
    },
  methods: {     
      //获取该机构可选的父级机构
      
      getPorgCate(){
          let _params = {
              id:'0'
          }
          new Promise((resolve, reject) => {
                getParentCate(_params).then(response => {
                    if (response.data.err == 0) {
                        this.porgList = response.data.data;
                    } else {
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
        });
      },
      //获取所有机构
      getOrgCate(){
        new Promise((resolve, reject) => {
                getAllCate().then(response => {
                    if (response.data.err == 0) {
                        this.orgList = response.data.data;
                    } else {
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
        });
      },
      ///获取角色列表
        getRole() {
            new Promise((resolve, reject) => {
                getOrgRole().then(response => {
                    if (response.data.err == 0) {
                        // this.$Message.success(response.data.info);
                        this.roleList = response.data.data;
                    } else {
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
      // 角色idname传值
        setOption(value,type){
            this.formdata.role_id = value.value;
            this.formdata.role_name = value.label;
        },
        //   点击返回 回退上一页面
        back(){
            this.$router.back(-1)
        },
      //时间转换
        datachange(date,obj,param){
            obj[param] = date
        },
    //   对于地区选择的函数处理
       areaChange(value, selectedData){
            console.log(value)
            console.log(selectedData)
            var _areatxt = ''
            for(var i = 0,len = selectedData.length;i<len;i++){
                _areatxt += selectedData[i].label
            }
            console.log(_areatxt)
            // this.address = _areatxt
            
            // this.search_addr(_areatxt)
            this.formdata.area_id = [value[0],value[1],value[2]]
            console.log(this.formdata.area_id,"area_id")
        },
        // 对于 地址的选择地图事件的调用
        addressChange() {
            var _address =   this.formdata.address;
            this.onSearchResult(_address);
            this.mapShow = true;
        },
         onSearchResult(address) {
            var map = this.map
            var local = new AMap.PlaceSearch({
                map: map
            });
            local.search(address,function(status,result){
            });
            var _self = this
            local.on("markerClick",function(event){
                _self.formdata.lng = event.data.location.lng;
                _self.formdata.lat = event.data.location.lat;
            })
        },
   
    //   提交事件的函数处理
      handleSubmit(name1){
         this.tableaction = true;
         setTimeout(() => {
                    this.tableaction = false;
         }, 5000);
        var _this = this;
      _this.$refs[name1].validate(valid => {
        if (valid) {
        //   this.$Message.success('检测成功!');
          _this.X1 = true;
        } else {
        //   _this.$Message.error("填写信息不完善");
          return
        }
      });
      
    if(_this.X1==true){
        console.log(this.formdata,"canshu ")
        new Promise((resolve, reject) => {
            create2(this.formdata).then(res => {
                if (res.data.err == 0) {
                    this.$Message.success(res.data.info);
                    this.$router.push({name:"org_doclist"})
                } else {
                    this.$Message.error(res.data.info);
                }
                resolve();
            }).catch(error => {
                reject(error)
            })
        })
        }else{
            _this.$Message.error("带 * 表单必须完整填写");
            return
        }
        
      },
  },
 
}
</script>